body {
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --light: #f8f9fa;
    --dark: #343a40;
    --muted: #6c757d;
    --white: #fff;
    --borderColor: #dee2e6;
    --lightmuted: #b2b2b2;
}

html {
    height: 100%;
}

.p15 {
    padding: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mr10 {
    margin-right: 10px;
}

.df {
    display: flex;
}

.aic {
    align-items: center;
}

.jcc {
    justify-content: center;
}

.fdc {
    flex-direction: column;
}

.jcsb {
    justify-content: space-between;
}

.f1 {
    flex: 1;
}

.fn {
    flex: none;
}